import React, { Component } from 'react';
import './Register.scss'
import axios from 'axios'

class Register extends Component {
    constructor(props) {
        super(props)
        this.state = {
            account: '',
            nickname: '',
            adminPwd: '',
            tel: '',
            querenPwd: ''
        }
    }

    changVal(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    zhuceUser() {
        const params = new URLSearchParams()
        params.append("account", this.state.account)
        params.append("nickname", this.state.nickname)
        params.append("adminPwd", this.state.adminPwd)
        params.append("tel", this.state.tel)
        axios.post('http://api.aulence.com/store-manage/w2001/admin_sign-up.php', params).then(res => {
            console.log(res.data);
            if (res.data.includes("注册成功")) {
                axios.get(`http://api.aulence.com/store-manage/w2001/admin_nickname.php? account=${this.state.account}`).then(res => {
                    console.log(res);
                    let nicknames = res.data
                    this.props.switchLogin_state(true, false, nicknames)
                })
            } else {
                alert(res.data)
            }
        }).catch(res => {
            console.error(res.data);
        })
    }
    render() {
        // 结构赋值简化this.state的变量名
        const { account, nickname, adminPwd, tel, querenPwd } = this.state
        return (
            <div className="Register" >
                <div></div>
                <div>
                    <div>
                        <div className="username">
                            <input type="txte" placeholder="填写一个很猴赛雷的名字" value={account} name='account' onChange={this.changVal.bind(this)}></input>
                        </div>
                        <div className="username">
                            <input type="txte" placeholder="希望别人怎么称呼你" value={nickname} name='nickname' onChange={this.changVal.bind(this)}></input>
                        </div>
                        <div className="username">
                            <input type="txte" placeholder="填写一个便于联系你的手机号" value={tel} name='tel' onChange={this.changVal.bind(this)}></input>
                        </div>
                        <div className="username">
                            <input type="txte" placeholder="填写一个您自己都记不住的密码" value={adminPwd} name='adminPwd' onChange={this.changVal.bind(this)}></input>
                        </div>
                        <div className="username">
                            <input type="txte" placeholder="不会吧？不会吧？还有人能忘了刚输的密码吧" value={querenPwd} name='querenPwd' onChange={this.changVal.bind(this)}></input>
                        </div>
                        <p>已经拥有账号了？那就<span onClick={() => {
                            this.props.switchLogin_state(true, true)
                        }}
                        >登录</span>吧！</p>
                        <div className="username">
                            <button onClick={this.zhuceUser.bind(this)}>注册</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Register;